<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lesson 13</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root">
        {{ message }}

        <input type="text" v-model.lazy="message" />

        trim
        <input type="text" v-model.trim="message">

        number
        <input type="number" v-model.number="number">

        <select name="" id="" v-model="message" multiple>
            <option value="" disabled>请选择内容</option>
            <option v-for="item in options" :value="item.value">{{ item.text }}</option>
        </select>

        {{ bool }}
        <input type="checkbox" v-model="bool" true-value="hello" false-value="world">

        {{ str }}
    </div>
</body>

<script>
    const app = Vue.createApp({
        data() {
            return {
                bool: false,
                message: 'hello',
                number: 111,
                options: [
                    {
                        text: 'A', value: 'A',
                    },
                    {
                        text: "B", value: 'B'
                    },
                    {
                        text: "C", value: "C"
                    }
                ],
                str: "hello world"
            }
        }
    });

    const vm = app.mount('#root');
</script>
</html>